{
	template:`
	<a-page-header :title="model.name" :sub-title="model.description">
		<template #extra>
			<a-button type="primary" @click="toEditInter('');">添加接口</a-button>
			<m-back @click="back(false);">返回</m-back>
		</template>
		<a-row :gutter="16">
		    <a-col :span="8">
		        <a-divider orientation="left">接口列表</a-divider>
                <a-list :data-source="list">
                    <template #renderItem="{ item }">
                        <a-list-item>
                            <template #actions>
                                <span v-if="item.oid==inter.oid">>>></span>
                                <a-button v-else-if="item.status=='0'" type="link" @click="selectTestInter(item)">接口示例</a-button>
                                <a-button v-else type="link" @click="toEditInter(item.name);">修改</a-button>
                            </template>
                            <a-list-item-meta :description="item.description">
                                <template #title>
                                    <a-popconfirm :title="'确定要'+(item.status=='0'?'停用':'启用')+'吗?'" @confirm="setStatus(item)">
                                        <a-tag :color="item.status=='0'?'processing':'error'">{{item.status=='0'?'正常':'停用'}}</a-tag>
                                    </a-popconfirm>
                                    <a-tag :color="item.type=='A'?'warning':'success'">{{dict('api.model.ApiAuthInter!type',item.type)}}</a-tag>
                                    {{item.name}}
                                </template>
                            </a-list-item-meta>
                        </a-list-item>
                    </template>
                </a-list>
                <a-alert message="点击“正常”，设置成停用后可以修改。" class="margin-bottom"></a-alert>
                <a-alert message="数据处理需配置mconfig.properties的handler_pack包，包内的类方法增加@HandlerMethodMeta注解，接受参数和返回为注解type属性。"></a-alert>
		    </a-col>
		    <a-col :span="16">
                <a-card :hoverable="true">
                    <div v-if="inter&&inter.oid">
                        <a-tag :color="inter.type=='A'?'warning':'success'">{{dict('api.model.ApiAuthInter!type',inter.type)}}</a-tag>
                        {{inter.description}}
                        <div class="text-lg padding-top">
                            <a-row type="flex">
                                <a-col flex="auto">
                                    <a-typography-paragraph :copyable="{text:'/api/inter/'+inter.name}">
                                        接口地址：/api/inter/{{inter.name}}
                                    </a-typography-paragraph>
                                </a-col>
                                <a-col flex="100px" style="text-align:right;">
                                    <a-button type="primary warn" @click="toRequest">在线调用</a-button>
                                </a-col>
                            </a-row>
                        </div>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-divider orientation="left">请求JSON</a-divider>
                                <json-val :json-val="paramExample.request" :current-depth="0" :max-depth="3" :last="true"></json-val>
                            </a-col>
                            <a-col :span="12">
                                <a-divider orientation="left">响应JSON</a-divider>
                                <json-val :json-val="paramExample.response" :current-depth="0" :max-depth="3" :last="true"></json-val>
                            </a-col>
                        </a-row>
                    </div>
                    <a-empty v-else description="没有选择接口" />
                </a-card>
		    </a-col>
		</a-row>
	</a-page-header>
	`,
	props: ['localeZh','param','parentVue'],
	data:function(){
		return {
		    model:{admin:{},org:{}},
            list:[],
            inter:{},
            paramExample:{request:{},response:{},method:{}},
		};
	},
	mounted(){
	    this.model=this.param.model;
	    this.loadInterList();
	},
	methods:{
	    loadInterList:function(){
			this.requestData('action/api/apiAuthInter/getList',
				{authOid:this.model.oid},
				data=>{
					if(data.code==0){
						this.list=data.list;
					}else{
						this.remind().error(data.msg);
					}
				}
			);
	    },
		setStatus:function(item){
			var method=item.status=='0'?'doDisable':'doRecovery';
			this.requestData("action/api/apiAuthInter/"+method,
				{"model":{"oid":item.oid}},
				function(json){
					this.remind()[json.code==0?'success':'error'](json.msg);
					if(json.code==0){
						item.status=item.status=='0'?'9':'0';
						if(item.status=='9'&&this.inter.oid==item.oid){
						    this.selectTestInter({});
						}
					}
				}.bind(this)
			);
		},
	    toEditInter:function(name){
            this.openPage('action/api/apiAuthInter/toEdit',
                {model:{name:name,auth:this.model}},
                function(flag,obj){
                    if(flag){
                        this.loadInterList();
                    }
                },
                "800px"
            );
	    },
	    selectTestInter:function(item){
	        this.inter=item;
	        if(this.inter.oid){
                this.requestData("action/api/apiAuthInter/getParamExample",
                    {authId:item.auth.authId,"name":item.name},
                    function(json){
                        if(json.code==0){
                            this.paramExample=json.example;
                        }
                    }.bind(this)
                );
	        }
	    },
	    toRequest:function(){
			this.openPage("page/base/api/auth/requestApi.js",
				{method:this.paramExample.method},
				function(flag,obj){

		        }.bind(this),
		        '1100px'
	        );
	    },
	}
}